import React, { useState } from 'react';
import { Dropdown, Button, Space, Card, Typography, Badge } from 'antd';
import {
  AppleOutlined,
  MoonOutlined,
  BgColorsOutlined,
  CheckOutlined,
  HeartOutlined,
  EnvironmentOutlined,
  RocketOutlined,
} from '@ant-design/icons';
import { useTheme } from '../contexts/ThemeContext';
import type { MenuProps } from 'antd';

const { Text } = Typography;

const ThemeSelector: React.FC = () => {
  const { currentTheme, themes, changeTheme } = useTheme();
  const [open, setOpen] = useState(false);

  const getThemeIcon = (themeKey: string) => {
    switch (themeKey) {
      case 'light':
        return <AppleOutlined />;
      case 'dark':
        return <MoonOutlined />;
      case 'purple':
        return <HeartOutlined />;
      case 'green':
        return <EnvironmentOutlined />;
      case 'tech':
        return <RocketOutlined />;
      default:
        return <BgColorsOutlined />;
    }
  };

  const themeMenuItems: MenuProps['items'] = themes.map((theme) => ({
    key: theme.key,
    label: (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '8px 4px',
          minWidth: 200,
        }}
      >
        <Space>
          <div
            style={{
              width: 20,
              height: 20,
              borderRadius: '50%',
              background: theme.gradient || theme.config.token?.colorPrimary || '#1890ff',
              border: '2px solid #fff',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
            }}
          />
          <div>
            <div style={{ fontWeight: 500, fontSize: '14px' }}>
              {theme.name}
            </div>
            {theme.description && (
              <Text type="secondary" style={{ fontSize: '12px' }}>
                {theme.description}
              </Text>
            )}
          </div>
        </Space>
        {currentTheme.key === theme.key && (
          <CheckOutlined style={{ color: '#52c41a', fontSize: '16px' }} />
        )}
      </div>
    ),
    onClick: () => {
      changeTheme(theme.key);
      setOpen(false);
    },
  }));

  const menuItems = themes.map((theme) => ({
    key: theme.key,
    label: (
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '8px 4px',
        minWidth: 200,
      }}>
        <Space>
          <div
            style={{
              width: 20,
              height: 20,
              borderRadius: '50%',
              background: theme.gradient || theme.config.token?.colorPrimary || '#1890ff',
              border: '2px solid #fff',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: '#fff',
              fontSize: '10px',
            }}
          >
            {getThemeIcon(theme.key)}
          </div>
          <div>
            <div style={{ fontWeight: 500, fontSize: '14px' }}>
              {theme.name}
            </div>
            {theme.description && (
              <Text type="secondary" style={{ fontSize: '12px' }}>
                {theme.description}
              </Text>
            )}
          </div>
        </Space>
        {currentTheme.key === theme.key && (
          <CheckOutlined style={{ color: '#52c41a', fontSize: '16px' }} />
        )}
      </div>
    ),
    onClick: () => {
      changeTheme(theme.key);
    },
  }));

  return (
    <Dropdown
      menu={{ items: menuItems }}
      trigger={['click']}
      placement="bottomRight"
    >
      <Button
        type="text"
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '6px',
          padding: '6px 12px',
          borderRadius: '8px',
          transition: 'all 0.3s ease',
          background: 'rgba(0, 0, 0, 0.02)',
        }}
      >
        <div
          style={{
            width: 18,
            height: 18,
            borderRadius: '50%',
            background: currentTheme.gradient || currentTheme.config.token?.colorPrimary || '#1890ff',
            border: '2px solid #fff',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
          }}
        />
        {getThemeIcon(currentTheme.key)}
      </Button>
    </Dropdown>
  );
};

export default ThemeSelector;
